<template>
  <div class="box">
    <div class="content">
      <!-- 面包屑组件 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <span class="back" @click="goBack()">返回上一页</span>
        <!-- <el-breadcrumb-item>
        <span class="span">项目管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="span" style="color: #666">商票驿</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="span" style="color: #666">项目详情</span>
      </el-breadcrumb-item> -->
      </el-breadcrumb>
      <!-- 一楼 -->
      <div class="f1" v-if="projectMessage">
        <div class="title">
          <p>{{ projectMessage.oderid }}</p>
          <h5
            v-if="
              projectMessage.status == '待反馈' ||
              projectMessage.status == '未反馈'
            "
            style="background-color: #f19149"
          >
            {{ projectMessage.status }}
          </h5>
          <h5 v-else-if="projectMessage.status == '已反馈'">
            {{ projectMessage.status }}
          </h5>
          <h5
            style="background-color: #48a0b8"
            v-if="
              businessSPinfosList.length == 0 &&
              projectMessage.status == '已反馈'
            "
          >
            暂无适配产品
          </h5>
          <h5
            style="background-color: #56b1ca"
            v-if="projectMessage.producttype !== ''"
          >
            {{ projectMessage.producttype }}
          </h5>
        </div>
        <!-- 产品信息 -->
        <div class="details">
          <div class="details-item" v-if="projectMessage">
            <div class="details-item-left">
              <ul style="width: 200px">
                <li>票据号码：</li>
                <li>票据到期日：</li>
                <li>承兑人开户行行号：</li>
              </ul>
              <div style="width: 400px">
                <p style="cursor: pointer; display: flex; align-items: center">
                  <span>{{ projectMessage.sPticketinfo.billnumber }}</span>
                  <el-image
                    @click="getFileImg"
                    style="width: 19px; height: 14px"
                    :src="icon"
                    :preview-src-list="imgUrl"
                  >
                  </el-image>
                </p>
                <p style="width: 370px">
                  <span>{{
                    getDate(projectMessage.sPticketinfo.billdate)
                  }}</span>
                </p>
                <p style="width: 370px">
                  <span>{{
                    getData(projectMessage.sPticketinfo.acceptorbank)
                  }}</span>
                </p>
              </div>
            </div>
            <div class="details-item-left">
              <ul>
                <li>票面金额（元）：</li>
                <li>承兑人名称：</li>
                <li>票据剩余期限（天）：</li>
              </ul>
              <div>
                <p>{{ getArea(projectMessage.sPticketinfo.faceamount) }}</p>
                <p style="width: 370px">
                  {{ getData(projectMessage.sPticketinfo.acceptorname) }}
                </p>
                <p>
                  <span>{{ getData(projectMessage.residualdate) }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 二楼 -->
      <div class="f2">
        <!-- 顶部标签 -->
        <div class="title">
          <h3 :class="{ active: row == 1 }" @click="row = 1">
            <span>询价详情</span>
          </h3>
        </div>
        <div class="f2-f2" v-if="projectMessage">
          <div class="enquirys">
            <!-- 待反馈 -->
            <div class="null" v-if="projectMessage.status == '待反馈'">
              <img
                src="../../../assets/PC/新增补充切图/03商票驿/匹配信息.png"
                alt=""
              />
              <p>正在为您匹配产品信息</p>
              <p>
                如需了解更多商票资讯，请关注
                <i
                  style="color: #48a0b8; 
}"
                  >“商驿供应链”</i
                >公众号
              </p>
              <!-- <p>
              或登录商票驿网站：<a
                href="https://shangpiaoyi.thunlink.com"
                target="_blank"
                >https://shangpiaoyi.thunlink.com</a
              >
            </p> -->
            </div>
            <!-- 暂无适配产品 -->
            <div class="null" v-else-if="businessSPinfosList.length == 0">
              <img
                src="../../../assets/PC/新增补充切图/03商票驿/暂无信息.png"
                alt=""
              />
              <p>暂无可申请的产品信息</p>
              <!-- <p>您可联系人工客服010-88110399</p>
            <p>或<span @click="goBusinessTicket()">使用其他票据询价</span></p> -->
            </div>

            <!-- 已反馈 -->
            <div class="enquiry" v-else>
              <template v-if="businessSPinfosList">
                <div
                  class="enquiry-item"
                  v-for="(item, index) in businessSPinfosList"
                  :key="index"
                >
                  <div class="title">
                    <div class="title_top">
                      <h4>{{ item.financename }}</h4>
                      <p
                        :class="{
                          yptx: item.matchtype == '贴现',
                          spzy: item.matchtype == '质押',
                        }"
                      >
                        {{ item.matchtype }}
                      </p>
                    </div>
                    <div class="apply" @click="goEnquiryApply(item)">
                      <span>立即申请</span>
                      <img src="@/assets/image/next.png" alt="" />
                    </div>
                  </div>
                  <!-- 产品信息 -->
                  <div class="details">
                    <div class="details-item">
                      <div class="details-item-left">
                        <ul>
                          <li>业务类型：</li>
                          <li>技术服务费率（年化）：</li>
                          <li>技术服务费（元）：</li>
                          <li>担保费率（年化）：</li>
                        </ul>
                        <div>
                          <p>{{ getData(item.producttype) }}</p>
                          <p>
                            {{ getArea(item.technicalservicerate) }}
                            <i v-show="item.technicalservicerate">%</i>
                          </p>
                          <p>{{ getArea(item.technicalservice) }}</p>
                          <p>
                            {{ getArea(item.guaranteerate) }}
                            <i v-show="item.guaranteerate">%</i>
                          </p>
                        </div>
                      </div>
                      <div class="details-item-left">
                        <ul>
                          <li>预计到账金额（元）：</li>
                          <li v-show="item.matchtype == '贴现'">
                            贴现利率（年化）：
                          </li>
                          <li v-show="item.matchtype == '质押'">
                            融资利率（年化）：
                          </li>
                          <li>最大退回尾款（元）：</li>
                          <li>担保服务费（元）：</li>
                        </ul>
                        <div>
                          <p>{{ getArea(item.arrivalamount) }}</p>
                          <p>
                            {{ getArea(item.discount) }}
                            <i v-show="item.discount">%</i>
                          </p>
                          <p>{{ getArea(item.returnmount) }}</p>
                          <p>{{ getArea(item.guaranteefee) }}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <!-- 查看票据正反面信息 -->
    <el-dialog
      title="票面信息"
      v-model="contractCardbackVisible"
      width="40%"
      center
    >
      <!-- 内容区域 -->
      <div
        v-viewer
        v-if="FileImg != ''"
        style="text-align: center; width: 300px; heigth: 300px"
        class="dialog-center"
        @click="contractCardbackVisible = false"
      >
        <img
          style="width: 100%; heigth: 100%; margin-bottom: 15px"
          :src="FileImg"
          alt=""
        />
        <p style="margin-top: 20px">点击图片可查看大图</p>
      </div>

      <div
        v-else
        style="text-align: center; margin-bottom: 30px"
        class="dialog-center"
      >
        <h4>暂无详细资料</h4>
      </div>
      <!-- 按钮区域 -->
      <template #footer>
        <div class="dialog-footer">
          <button
            class="dialog-footer-bnt btn1"
            @click="contractCardbackVisible = false"
          >
            取 消
          </button>
          <button
            class="dialog-footer-bnt btn2"
            @click="contractCardbackVisible = false"
          >
            确 定
          </button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getFilePath, myPostFetch } from "@/utils";
import { AreaDispose, dateDispose, dataDispose } from "@/utils/filters.js";
import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      icon: "http://operate.thunlink.cn/protocol/image/票.png",
      imgUrl: null,
      businessSPinfosList: null,
      //产品数据
      row: 1,
      id: "", //项目id
      sPticketinfoid: "",
      FileImg: "",
      // 弹框变量
      contractCardbackVisible: false,
      projectMessage: null,
    };
  },

  mounted() {
    // 获取地址栏中的id
    this.id = localStorage.getItem("id");
    this.sPticketinfoid = localStorage.getItem("ticketinfoid");
    this.findaSP();
    setTimeout(() => {
      this.getFileImg();
    }, 500);
  },

  methods: {
    // 金额处理
    getArea(value) {
      return AreaDispose(value);
    },
    // 时间处理
    getDate(value) {
      return dateDispose(value);
    },
    // 数据处理 为空显示为 -
    getData(value) {
      return dataDispose(value);
    },
    // 项目管理询价详情
    async findaSP() {
      let url = "/api/BusinessSPs/findaSPlist";
      let params = {
        sPticketinfoid: this.sPticketinfoid,
      };
      let data = await myPostFetch(url, params);
      if (data.code == 100) {
        this.projectMessage = data.data;
        this.businessSPinfosList = data.data.businessSPinfos;
        for (let i = 0; i < this.businessSPinfosList.length; i++) {
          this.businessSPinfosList[i].acceptorname =
            data.data.sPticketinfo.acceptorname;
          if (
            this.businessSPinfosList[i].matchtype == "90" ||
            this.businessSPinfosList[i].matchtype == "92"
          ) {
            this.businessSPinfosList[i].show01 =
              this.businessSPinfosList[i].matchtype;
            this.businessSPinfosList[i].matchtype = "贴现";
          } else if (this.businessSPinfosList[i].matchtype == "91") {
            this.businessSPinfosList[i].show01 =
              this.businessSPinfosList[i].matchtype;
            this.businessSPinfosList[i].matchtype = "质押";
          }
        }
      } else {
        ElMessage.error("信息错误");
      }
      return data;
    },
    // 获取图片
    async getFileImg() {
      let id = this.id;
      let a = [];
      let { data } = await getFilePath(id);
      if (data) {
        if (data.length == 0) return ElMessage.error("暂无票据信息");
        for (let i = 0; i < data.length; i++) {
          a.push(data[i].path);
        }
        this.imgUrl = a;
      }
    },
    // 跳转至申请
    async goEnquiryApply(item) {
      let discount = item.discount;
      let productcodes = item.productcode;
      let url = "/api/BusinessSPs/findproducts";
      let params = {
        productcode: productcodes,
      };
      let data = await myPostFetch(url, params);
      if (data.data) {
        let productcode = data.data.productcode;
        let productname = data.data.productname;
        let id = data.data.id;
        let show01 = item.show01;
        localStorage.setItem("productcode", productcode);
        localStorage.setItem("productname", productname);
        localStorage.setItem("show01", show01);
        localStorage.setItem("radio", discount);
        localStorage.setItem("applyid", id);

        this.$router.push(`/enquiry`);
      }
      // this.setTim();
    },
    goBusinessTicket() {
      this.$router.push("/businessTicket");
      this.setTim();
    },
    // 返回上一页
    goBack() {
      this.$router.push("/projectCrossBorder");
    },
    setTim() {
      setTimeout(() => {
        this.$router.go(0);
      }, 1000);
    },
    // changeHash(idName) {
    //   document.querySelector(idName).scrollIntoView(true);
    // },
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  // 返回上一页
  .back {
    position: absolute;
    cursor: pointer;
    left: 0px;
    font-size: 16px;
    color: #0a7be0;
    text-decoration: underline;
    user-select: none;
  }
  // 面包屑
  .breadcrumb {
    display: flex;
    align-items: center;
    height: 24px;
    .icon {
      margin: 0 10px 0 4px;
    }
    .span {
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
    }
  }

  .f1 {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
    // border-radius: 6px;
    margin: 15px 0 10px 0;
    padding: 20px;

    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 24px;
      p {
        font-size: 20px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #333333;
      }
      h5 {
        // width: 66px;
        padding: 0 3px;
        height: 18px;
        background: #3cb0ff;
        border-radius: 2px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 18px;
        margin-left: 8px;
      }
    }
    // <!-- 产品详细信息开始 -->
    .details {
      width: 100%;
      margin-left: 10px 10px;
      .details-item {
        display: flex;
        width: 100%;
        justify-content: space-between;
        .details-item-left {
          display: flex;
          width: 48%;
          height: 100%;
          ul {
            width: 180px;
            height: 100%;
            font-size: 17px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #999999;
            li {
              margin-top: 20px;
              height: 30px;
              background-color: #fff;
            }
          }
          div {
            width: 170px;
            height: 100%;
            margin-left: 12px;
            p {
              height: 30px;
              font-size: 17px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #4d4d4d;
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
  .f2 {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
    // border-radius: 6px;
    padding: 20px 20px;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      padding: 12px 20px;
    }
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 60px;
      z-index: 99;
      h3 {
        height: 32px;
        width: 75px;
        line-height: 28px;
        text-align: center;
        box-sizing: border-box;
        margin-left: 15px;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #838383;
        cursor: pointer;
        &.active {
          box-sizing: border-box;
          border-bottom: 2px solid #0a7be0;
          color: #0a7be0;
        }
        a:hover {
          color: #0a7be0;
        }
      }
    }
    .f2-f2 {
      width: 100%;
      // // 小屏
      // @media only screen and (min-width: 900px) and (max-width: 1535px) {
      //   height: 400px;
      // }
      // // 中屏
      // @media only screen and (min-width: 1536px) and (max-width: 1919px) {
      //   height: 400px;
      // }
      // // 大屏
      // @media only screen and (min-width: 1920px) and (max-width: 2580px) {
      //   height: 479px;
      // }
      // overflow: auto;
      scroll-behavior: smooth;
      .null {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 300px;

        // 大屏
        @media only screen and (min-width: 1920px) and (max-width: 2580px) {
          margin-top: 60px;
        }

        img {
          width: 326px;
          height: 212px;
        }
        p {
          font-size: 13px;
          color: #666;
          margin-bottom: 8px;
          a {
            color: #0a7be0;
            cursor: pointer;
          }
          span {
            color: #0a7be0;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
      .enquiry {
        padding: 0 15px;
        .enquiry-item {
          box-sizing: border-box;
          padding: 5px 0 25px 0;
          width: 100%;
          border-bottom: 1px solid #e6e6e6;
          .title {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            height: 35px;
            .title_top {
              display: flex;
              align-items: center;
              h4 {
                // 小屏
                @media only screen and (min-width: 900px) and (max-width: 1535px) {
                  font-size: 16px;
                }
                // 中屏
                @media only screen and (min-width: 1536px) and (max-width: 1919px) {
                  font-size: 17px;
                }
                // 大屏
                @media only screen and (min-width: 1920px) and (max-width: 2580px) {
                  font-size: 19px;
                }
                color: #000;
              }
              p {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 67px;
                height: 19px;
                border-radius: 2px;
                font-size: 14px;
                background-color: #fff;
                margin-left: 10px;
                &.spzy {
                  color: #ff6060;
                  border: 1px solid #ff6060;
                }
                &.yptx {
                  border: 1px solid #f28537;
                  color: #f28537;
                }
              }
            }
            .apply {
              display: flex;
              justify-content: center;
              cursor: pointer;
              width: 168px;
              height: 32px;
              background: #0a7be0;
              border-radius: 4px;
              display: flex;
              align-items: center;
              height: 100%;
              span {
                font-size: 18px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #ffffff;
                margin-right: 5px;
              }
              img {
                margin-left: 10px;
                width: 26px;
                height: 26px;
              }
            }
          }
          .details {
            width: 100%;
            margin-left: 10px 10px;
            .details-item {
              display: flex;
              width: 100%;
              .details-item-left {
                display: flex;
                width: 48%;
                height: 100%;
                ul {
                  width: 250px;
                  height: 100%;
                  font-size: 17px;
                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #999999;
                  li {
                    margin-top: 12px;
                    height: 30px;
                    background-color: #fff;
                  }
                }
                div {
                  width: 280px;
                  height: 100%;
                  margin-left: 12px;
                  p {
                    height: 30px;
                    font-size: 17px;
                    font-family: Source Han Sans SC;
                    font-weight: 400;
                    color: #4d4d4d;
                    margin-top: 12px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .f2-f2::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #fff;
  }

  .f2-f2::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(36, 143, 172, 0.5);
  }
  // 弹出框
  .dialog-center {
    width: 90%;
    margin: 0 auto;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #48a0b8;
      border: 1px solid #56b1ca;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #0a7be0;
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
  .el-form-item {
    margin-bottom: 15px;
    .file {
      font-size: 15px;
      margin-right: 10px;
      color: #0a7be0;
      text-decoration: underline;
      cursor: pointer;
    }
    .file1 {
      color: #999;
    }
  }
  // 弹出框
  .dialog-center {
    margin: 0 auto;
    width: 90%;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #0a7be0;
      border: 1px solid #0a7be0;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #0a7be0;
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
}
.content {
  margin: 0 auto;
  position: relative;
  width: 960px;
}
/* 输入框样式  */
::v-deep(.el-input__inner) {
  box-sizing: border-box;
  width: 280px;
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
</style>
<style lang="scss">
/* 表格 */
.el-table {
  th.el-table__cell > .cell {
    font-size: 16px;
    font-weight: 400;
  }
  .cell {
    font-size: 16px;
  }
}
.el-table tr {
  height: 40px;
}
.el-table thead {
  height: 40px;
}
</style>
